<template>
    <div class="store-icon-order">
        <figure>
            <img v-if="active_type == 1" src="@/assets/images/store/store-order-spy.png" />
            <img v-else-if="active_type == 2" src="@/assets/images/store/store-order-etsy.png" />
            <img v-else-if="active_type == 3" src="@/assets/images/store/store-select-wix.png" />
            <img v-else-if="active_type == 4" src="@/assets/images/store/store-order-woo.png" />
            <img v-else-if="active_type == 5" src="@/assets/images/store/store-order-squ.png" />
            <img v-else src="@/assets/images/store/store-order-self.png" />
        </figure>
        <span v-if="shop_name" v-text="shop_name" :title="shop_name"></span>
        <span v-else-if="!active_type">Sample order</span>
    </div>
</template>
<script>
export default {
    props: ['type', 'name', 'item'],
    data () {
        return {
        }
    },
    computed: {
        active_type: {
            get () {
                let type = 0;
                if (this.type) {
                    type = this.type;
                } else if (this.item) {
                    type = this.item.shop_type;
                };
                return type;
            }
        },
        shop_name: {
            get () {
                if (this.name) {
                    return this.name
                } else if (this.item) {
                    return this.item.shop_name_text || this.item.shop_name;
                } else {
                    return null
                }
            }
        }
    },
    methods: {},
    created () { }
}
</script>
<style lang="scss" scoped>
.store-icon-order {
    display: flex;
    flex-direction: row;
    align-items: center;

    & > figure {
        margin-right: 4px;
        width: 20px;
        height: 20px;
        min-width: 20px;
        & > img {
            width: 100%;
            height: 100%;
        }
    }

    & > span {
        white-space: nowrap;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
